<template>
	<view class="list_item" @tap='changeFunc'>
		<view class="list_item_title">
			{{item.title}}
		</view>
		<view class="list_item_info">
			<view class="list_item_state">
				<u-icon size="14px" v-if="item.state === 1" color="green" name="checkmark-circle-fill"></u-icon>
				<u-icon size="14px" v-if="item.state === 0" color="red" name="info"></u-icon>
			</view>
			<img v-if="item.type == 'img'" :src="item.info">
			<span v-else>{{item.info}}</span>
		</view>
		<view class="list_item_icon">
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props:{
			item:{
				type:Object
			}
		},
		methods: {
			changeFunc() {
				this.$emit("changeFunc")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_item {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 20rpx;
		border-radius: 12rpx;
		position: relative;
		.list_item_info {
			position: absolute;
			top: 50%;
			right: 60rpx;
			transform: translateY(-50%);
			.list_item_state {
				display: inline-block;
				margin-right: 6rpx;
			}
			img {
				margin-top: 40rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			span {
				color: #666;
			}
		}
		.list_item_icon {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}
</style>